<style scoped>
.details-container {
    /* background-color: rgb(248 248 248); */
}

.details-card {
    width: 100%;
    margin-top: 1rem;
}

.details-card-span {
    margin-left: 0.5rem;
    /* font-size: 15px; */
    font-size: var(--el-font-size-medium);
    font-weight: 400;
    color: rgb(111 111 111);
    line-height: 2rem;
}

.details-card-item {
    /* border-bottom: 1px solid var(--el-border-color); */
    padding: 5px 0 10px 0;
}

.details-card-item-title {
    margin-bottom: 5px;
    color: rgb(111 111 111);
}

.details-card-item-area {
    display: flex;
    justify-content: left;
}

.details-card-item-input {
    width: 70%;
}

.details-card-item-btn {
    margin-left: 1rem;
}
.details-margin-l-1 {
    margin-left: 1rem;
}
.details-margin-l-2 {
    margin-left: 2rem;
}
.details-margin-r-1 {
    margin-right: 1rem;
}
.details-margin-r-2 {
    margin-right: 2rem;
}

.details-card-pwd-option {
    display: flex;
    align-items: center;
}

.details-card-pwd-option-title {
    color: rgb(111 111 111);
}

.details-card-pwd-option-length {
    width: 30rem;
}
</style>

<template>
    <el-container class="h-full details-container" v-if="store.detailsWin != 0">
        <!-- 编辑页面 -->
        <el-main class="border-b-1 padding-0 h-0">
            <el-scrollbar>
                <el-row justify="center">
                    <el-col :span="23">
                        <div class="details-card">
                            <span class="details-card-span">详细信息</span>
                            <el-card :body-style="{ padding: '10px 15px 15px 15px' }">
                                <div class="details-card-item">
                                    <div class="details-card-item-title">文件夹</div>
                                    <el-select :disabled="store.detailsWin == 1" v-model="store.selectDetails.folderId"
                                        class="details-card-item-input" placeholder="所有项目">
                                        <el-option v-for="folder in store.folderList" :key="folder.id"
                                            :label="folder.name" :value="folder.id"></el-option>
                                    </el-select>
                                </div>
                                <div class="details-card-item">
                                    <div class="details-card-item-title">名称</div>
                                    <el-input :disabled="store.detailsWin == 1" v-model.trim="store.selectDetails.title"
                                        maxlength="85" show-word-limit />
                                </div>
                                <div class="details-card-item">
                                    <div class="details-card-item-title">用户名</div>
                                    <div class="details-card-item-area">
                                        <div class="details-card-item-input">
                                            <el-input :disabled="store.detailsWin == 1"
                                                v-model.trim="store.selectDetails.username" maxlength="85"
                                                show-word-limit />
                                        </div>
                                        <div class="details-card-item-btn">
                                            <el-button type="success" :icon="CopyDocument" circle @click="copyUsername">
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                                <div class="details-card-item">
                                    <div class="details-card-item-title">密码</div>
                                    <div class="details-card-item-area">
                                        <div class="details-card-item-input">
                                            <el-input :disabled="store.detailsWin == 1"
                                                v-model.trim="store.selectDetails.pwd" type="password" maxlength="85"
                                                show-word-limit :show-password="store.detailsWin == 2"
                                                autocomplete="off" />
                                        </div>
                                        <div class="details-card-item-btn">
                                            <el-button type="success" :icon="CopyDocument" circle @click="copyPwd">
                                            </el-button>
                                            <el-tooltip v-if="store.detailsWin == 2" class="box-item" effect="dark"
                                                content="生成密码" placement="top-start">
                                                <el-button :icon="Refresh" circle @click="generatePwd"></el-button>
                                            </el-tooltip>
                                        </div>
                                    </div>
                                    <!-- 密码生成策略 -->
                                    <div v-if="showPwdOption">
                                        <div class="details-card-pwd-option">
                                            <div class="details-card-pwd-option-title">长度</div>
                                            <div class="details-card-pwd-option-length details-margin-l-2">
                                                <el-slider v-model="pwdLength" :min="1" :max="20"
                                                    :marks="pwdLengthMark" />
                                            </div>
                                            <div class="details-margin-l-2">
                                                <el-checkbox v-model="pwdIncludeSymbol" label="!@#$%^&*" size="large" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                        <div class="details-card">
                            <el-card :body-style="{ padding: '10px 15px 15px 15px' }">
                                <div class="details-card-item">
                                    <div class="details-card-item-title">地址</div>
                                    <div class="details-card-item-area">
                                        <div class="details-card-item-input" style="width: 90%;">
                                            <el-input :disabled="store.detailsWin == 1"
                                                v-model.trim="store.selectDetails.addr" maxlength="170"
                                                show-word-limit />
                                        </div>
                                        <div class="details-card-item-btn">
                                            <el-button type="success" :icon="CopyDocument" circle @click="copyAddr">
                                            </el-button>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>

                        <div class="details-card">
                            <el-card :body-style="{ padding: '10px 15px 15px 15px' }">
                                <div class="details-card-item">
                                    <div class="details-card-item-title">备注</div>
                                    <el-input :disabled="store.detailsWin == 1" v-model="store.selectDetails.memo"
                                        :autosize="{ minRows: 6, maxRows: 10 }" type="textarea"></el-input>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="23">
                        <!-- 相当的坑逼，如果下面的div放到上面的el-col中，绝B报错，具体原因不明 -->
                        <div>
                            <p>最后更新时间：{{ store.lastModifyDate }}</p>
                        </div>
                    </el-col>
                </el-row>
            </el-scrollbar>
        </el-main>
        <el-footer class="padding-0 footer-opt">
            <el-row class="h-full" align="middle" justify="space-between">
                <el-col :span="14">
                    <div style="text-align: left;">
                        <el-button v-if="store.detailsWin == 2" size="large" type="success" plain
                            class="details-margin-l-1" @click="saveDetails">保存</el-button>
                        <el-button v-else-if="store.detailsWin == 1 && store.selectDetails.deleted == 0"
                            class="details-margin-l-1" size="large" type="primary" plain @click="editDetails">修改
                        </el-button>
                        <el-button v-else-if="store.detailsWin == 1 && store.selectDetails.deleted == 1"
                            class="details-margin-l-1" size="large" type="primary" plain @click="restoreDetails">还原
                        </el-button>
                        <el-button size="large" plain @click="cancelAddDeatils">{{
                            store.detailsWin == 2 ?
                                (store.selectDetails.id ? "取消" : "关闭") : "关闭"
                        }}</el-button>
                    </div>
                </el-col>
                <el-col v-if="store.detailsWin == 1" :span="10">
                    <div style="text-align: right;">
                        <el-button size="large" type="danger" plain class="details-margin-r-1" @click="deleteDetails">
                            <el-icon :size="25">
                                <Delete />
                            </el-icon>
                        </el-button>
                    </div>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
    <el-container class="h-full details-container" v-else>
        <div style="display: flex;width: 100%;align-items: center;justify-content: center;">
            <img style="width: 40%;" :src="bookUrl" @dblclick="signOut" />
        </div>
    </el-container>
</template>

<script lang="ts" setup>
import {
    Refresh,
    CopyDocument,
    Delete
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus';
import bookUrl from '../assets/book.png';
import { reactive, ref, watch } from 'vue'
import type { CSSProperties } from 'vue'
import { Details, Tools } from '../assets/core';
import { useStore } from '../main';
import { storeToRefs } from 'pinia';

const store = useStore();
const { selectMenuIndex } = storeToRefs(store);//为每个被动属性创建引用

const signOut = async () => {
    // ElMessageBox.confirm('确认锁定吗，没有保存的数据将会清空？').then(async () => {
    //     try {
    //         await store.pwdmApi.signOut();
    //     } catch (error) { }
    //     location.reload();
    // }).catch(() => { });
    try {
        await store.pwdmApi.signOut();
    } catch (error) { }
    location.reload();
};

/**
 * 监听选中的文件夹，及时刷新页面文件夹选中项
 */
watch(selectMenuIndex, (newValue, oldValue) => {
    if (store.detailsWin == 2) {
        if (newValue.startsWith("1-")) {
            store.selectDetails.folderId = Number(newValue.replace("1-", ''));
        } else {
            store.selectDetails.folderId = undefined;
        }
    }
});

const saveDetails = () => {
    showPwdOption.value = false;
    store.pwdmApi.detailsSave(store.selectDetails).then(newDetails => {
        const { id, updateTime = "" } = newDetails;
        store.selectDetails.id = id;
        store.selectDetails.updateTime = updateTime;
        store.refreshItem = true;
        ElMessage({
            message: "保存成功",
            type: 'success',
        });
        store.detailsWin = 1;
    }).catch(error => {
        ElMessage({
            message: error.msg,
            type: 'error',
        });
    });
};
const cancelAddDeatils = () => {
    showPwdOption.value = false;
    if (store.selectDetails.id && store.detailsWin != 1) {
        //恢复数据
        Object.assign(store.selectDetails, snapshot);
        store.detailsWin = 1;
    } else {
        store.detailsWin = 0;
    }
};
const snapshot: Details = {};//数据快照，用于取消编辑的时候恢复数据
const editDetails = () => {
    //暂存当前数据
    Object.assign(snapshot, store.selectDetails);
    store.detailsWin = 2;
};

const copyVal = (data: any) => {
    if (data) {
        navigator.clipboard.writeText(data).then(() => {
            ElMessage({
                message: "复制成功",
                type: 'success',
            });
        });
    } else {
        ElMessage({
            message: "没有数据",
            type: 'warning',
        });
    }
};
const copyUsername = () => {
    copyVal(store.selectDetails.username);
};
const copyPwd = () => {
    copyVal(store.selectDetails.pwd);
};
const copyAddr = () => {
    copyVal(store.selectDetails.addr);
};

interface Mark {
    style: CSSProperties
    label: string
};
type Marks = Record<number, Mark | string> //Record：ts的高级类型，定义键值对
const pwdLengthMark = reactive<Marks>({//密码长度滑块上的标识
    6: '6',
    12: '12',
    18: '18'
});
const showPwdOption = ref(false);
const pwdLength = ref(12);//密码生成长度
const pwdIncludeSymbol = ref(false);
/**
 * 生成密码
 */
const generatePwd = () => {
    store.selectDetails.pwd = Tools.generatePwd(pwdLength.value, pwdIncludeSymbol.value);
    showPwdOption.value = true;
};
watch(pwdLength, (newVal, oldVal) => {
    store.selectDetails.pwd = Tools.generatePwd(newVal, pwdIncludeSymbol.value);
});
watch(pwdIncludeSymbol, (newVal, oldVal) => {
    store.selectDetails.pwd = Tools.generatePwd(pwdLength.value, newVal);
});

/**
 * 还原
 */
const restoreDetails = () => {
    store.selectDetails.deleted = 0;
    store.pwdmApi.detailsSave(store.selectDetails).then(newDetails => {
        store.selectDetails.updateTime = newDetails.updateTime;
        store.detailsWin = 0;
        store.refreshItem = true;
        ElMessage({
            message: "OK",
            type: 'success',
        });
    }).catch(error => {
        store.selectDetails.deleted = 1;
        ElMessage({
            message: error.msg,
            type: 'error',
        });
    });
};
/**
 * 删除
 */
const deleteDetails = () => {
    if (store.selectDetails.deleted == 1) {
        //彻底删除
        store.pwdmApi.detailsDelete(store.selectDetails).then(() => {
            store.detailsWin = 0;
            store.refreshItem = true;
            ElMessage({
                message: "OK",
                type: 'success',
            });
        }).catch(error => {
            ElMessage({
                message: error.msg,
                type: 'error',
            });
        });
    } else {
        //移动到回收站
        store.selectDetails.deleted = 1;
        store.pwdmApi.detailsSave(store.selectDetails).then(newDetails => {
            store.selectDetails.updateTime = newDetails.updateTime;
            store.detailsWin = 0;
            store.refreshItem = true;
            ElMessage({
                message: "已删除",
                type: 'success',
            });
        }).catch(error => {
            store.selectDetails.deleted = 0;
            ElMessage({
                message: error.msg,
                type: 'error',
            });
        });
    }
};
</script>